<template>
  <div>
    <!-- 课程准备 -->
    <div class="head">
      <div class="left">
        <img src="@/assets/fanhui@2x.png" alt="" @click="backPre" />
        <!-- <span>教学资料 ({{itemInfo.majorName}})</span> -->
      </div>
      <div class="text">
        <span style="display: inline-block">课程准备</span>
        <span style="display: block; width: 320px">
          ({{ itemInfo.majorName }})</span
        >
      </div>
      <div class="middle">
        <span>课程{{ Number(num) + 1 }}：{{ itemInfo.name }}</span>
      </div>
      <span></span>
    </div>
    <div class="classes">
      <div class="left">
        <span>我的班级</span>
        <div>
          <ul>
            <li
              v-for="item in classList"
              :key="item.departmentId"
              :class="item.status ? 'active' : ''"
              @click="changeStatus(item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <!-- <div>
          <p>
            学生人数：<span v-if="groupInfo.studentCount">{{
              groupInfo.studentCount
            }}</span>
            <span v-else>0</span>
          </p>
          <p>
            完成分配：<span v-if="groupInfo.fulfilCount">{{
              groupInfo.fulfilCount
            }}</span>
            <span v-else>0</span>
          </p>
        </div> -->
        <div @click="addGroups">
          <img src="@/assets/classpeople.png" alt="" />
          <span>增加分组</span>
        </div>
        <div @click="startUpLesson">
          <img src="@/assets/classpeople2.png" alt="" />
          <span>启动课程</span>
        </div>
      </div>
    </div>
    <div class="groupContent">
      <span class="title">分组</span>
      <div class="tableContent">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            type="selection"
            width="80"
            :selectable="selected"
            fixed="left"
          >
          </el-table-column>
          <el-table-column label="项目名称" width="170">
            <template slot-scope="scope">
              <!-- <span>{{scope.row.name}}</span> -->
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="scope.row.name"
                @blur="changeName(scope.row)"
                maxlength="25"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="项目小组名称" width="170">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="3"
                @blur="changeGroupName(scope.row)"
                placeholder="请输入内容"
                v-model="scope.row.groupName"
                maxlength="25"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="项目经理" width="200">
            <template slot-scope="scope">
              <div class="managerList">
                <div class="item" v-if="scope.row.managerList.length > 0">
                  <p v-if="scope.row.managerList[0].roleName.length > 0">
                    {{ scope.row.managerList[0].roleName[0].rolename }}
                  </p>
                  <img :src="scope.row.managerList[0].avatar" alt="" />
                  <p>{{ scope.row.managerList[0].name }}</p>
                </div>
                <div class="item">
                  <p></p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="更改项目经理"
                    placement="top"
                  >
                    <img
                      src="@/assets/missionerplus.png"
                      alt=""
                      @click="selectRole(scope.row)"
                  /></el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="组员" width="344">
            <template slot-scope="scope">
              <div class="managerList">
                <div v-if="scope.row.projectUserVoList.length > 0" class="role">
                  <div
                    class="item"
                    v-for="item in scope.row.projectUserVoList.slice(0, 6)"
                    :key="item.id"
                  >
                    <!-- <p v-for="element in item.roleName" :key="element.evaluationroleid">{{ element.rolename }}</p> -->
                    <p v-if="item.roleName.length > 1">多个角色</p>
                    <p
                      v-if="
                        item.roleName.length > 0 && item.roleName.length < 2
                      "
                    >
                      {{ item.roleName[0].rolename }}
                    </p>
                    <img :src="item.avatar" alt="" />
                    <p>{{ item.name }}</p>
                  </div>
                  <div
                    class="morePeople"
                    v-if="scope.row.projectUserVoList.length > 3"
                  >
                    <span>等{{ scope.row.projectUserVoList.length }}人</span>
                  </div>
                </div>
                <div class="item">
                  <p></p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="更改项目成员"
                    placement="top"
                  >
                    <img
                      src="@/assets/missionerplus.png"
                      alt=""
                      @click="getMembers(scope.row)"
                  /></el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div class="status">
                <span v-if="scope.row.status === 1" class="waitingStart"
                  >待开始</span
                >
                <span v-if="scope.row.status === 2" class="going">进行中</span>
                <span v-if="scope.row.status === 3" class="competed"
                  >已完成</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="到期时间" width="160">
            <template slot-scope="scope">
              <div style="width: 150px">
                <el-date-picker
                  v-model="scope.row.endDate"
                  type="date"
                  placeholder="选择日期"
                  @change="changeTime(scope.row)"
                  format="yyyy-MM-dd"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  slot="reference"
                >
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="进度" width="120">
            <template slot-scope="scope">
              <div style="width: 120px; margin: auto">
                <el-progress
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="Number(scope.row.progress)"
                ></el-progress>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <div class="btn">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看"
                  placement="top"
                >
                  <img
                    src="@/assets/chakan.png"
                    alt=""
                    @click="goinProject(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <img
                    src="@/assets/delete.png"
                    alt=""
                    @click="deleteGroups(scope.row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <selectManageRoleVue
      ref="child"
      :evaluationId="evaluationId"
      @getProjectRoleList="getProjectRoleList"
      @gettableData="gettableData"
    ></selectManageRoleVue>
    <SelectMembers
      ref="childMember"
      :evaluationId="evaluationId"
      @gettableData="gettableData"
      @getProjectMemberList="getProjectMemberList"
    ></SelectMembers>
  </div>
</template>

<script>
import { getMaterial, getGroup, addGroup, deleteGroup, startLesson, getClass, updateGroups } from '@/api/lessonPreparation/myLesson';
import selectManageRoleVue from './selectManageRole.vue';
import SelectMembers from './SelectMembers.vue';
export default {
  components: {
    selectManageRoleVue, SelectMembers
  },
  data() {
    return {
      itemInfo: {},
      num: '',
      tableData: [],
      tableData2: [],
      groupInfo: {},
      projectIdList: [],
      classList: [],
      evaluationId: '',
      projectRoleList: [],
      projectMemberList: [],
      // 修改对象
      updateProjectDto: {
        addProjectUserDtoList: [],
        project: {
          groupname: '',
          name: '',
          enddate: '',
          progress: ''
        }
      },
      isStatus: false,
      departmentId: 0,
      value1: ''

    };
  },
  methods: {
    // 获取当前项目信息
    async getData() {
      // console.log(this.$route.query.id);
      this.num = this.$route.query.index;
      const res = await getMaterial({ id: this.$route.query.id });
      // console.log(res);
      this.itemInfo = res.data;
      // this.EducationalList = res.data.projectmaterialFileVoList;
    },
    // 获取分组信息
    async gettableData(classId) {
      // console.log(sessionStorage.getItem('userid'));
      const res = await getGroup({ departmentId: classId, id: sessionStorage.getItem('userid'), projectId: this.$route.query.id });
      // console.log(res);
      this.groupInfo = res.data;
      if (res.data.evaluationId) {
        this.evaluationId = res.data.evaluationId;
      }
      this.tableData2 = JSON.parse(JSON.stringify(res.data.projectStudentVoList));
      this.tableData = res.data.projectStudentVoList;
      this.tableData.filter(item => {
        item.isEdit = false;
      });
      // console.log(this.tableData);
    },
    // 返回上一页
    backPre() {
      this.$router.replace('/lesson');
    },
    // 添加分组
    async addGroups() {
      const res = await addGroup({ id: this.$route.query.id, userId: sessionStorage.getItem('userid') });
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '新增分组成功',
          type: 'success'
        });
        this.gettableData(0);
      } else {
        // this.$message.error(`新增失败, ${res.msg}`);
        this.$message({
          showClose: true,
          message: `新增失败, ${res.msg}`,
          type: 'error'
        });
      }
    },
    // 跳转项目
    goinProject(val) {
      // console.log(val);
      if (val.type === 1) {
        this.$router.push({
          name: 'Prodetail',
          params: {
            projectId: val.id,
            projectLabel: val.label,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', val.id);
      } else {
        this.$router.push({
          name: 'Agileproject',
          params: {
            projectId: val.id,
            projectLabel: val.label,
            index: 0,
            currentView: 'survey'
          }
        });
        localStorage.setItem('projectId', val.id);
      }
    },
    // 删除分组
    deleteGroups(val) {
      // console.log(val);
      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async () => {
        const res = await deleteGroup({ id: val.id });
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '删除分组成功',
            type: 'success'
          });
          this.gettableData(0);
        } else {
          this.$message.error(`删除失败, ${res.msg}`);
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 设置项目是否可选，如果项目已启动则不能选择
    selected(row, index) {
      if (row.status > 1) {
        return false;
      } else {
        return true;
      }
    },
    // 获取用户选择的项目
    handleSelectionChange(val) {
      // console.log(val);
      this.projectIdList = [];
      val.forEach(element => {
        this.projectIdList.push(element.id);
      });
      // console.log(this.projectIdList);
      // this.multipleSelection = val;
    },
    // 启动项目
    async startUpLesson() {
      // console.log(this.projectIdList);
      if (this.projectIdList.length > 0) {
        // this.tableData.forEach(element => {
        //   console.log(element);
        // });
        const res = await startLesson(JSON.stringify(this.projectIdList));
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '启动课程成功',
            type: 'success'
          });
          this.projectIdList = [];
          this.gettableData(0);
        } else {
          // this.$message.error(`启动课程失败,${res.msg}`);
          this.$message({
            showClose: true,
            message: `启动课程失败,${res.msg}`,
            type: 'error'
          });
        }
      } else {
        // this.$message.error('请选择需要启动的课程');
        this.$message({
          showClose: true,
          message: `请选择需要启动的课程}`,
          type: 'error'
        });
      }
      this.projectIdList = [];
    },
    // 编辑分组
    editGroup(val) {
      // console.log(val);
      // this.projectRoleList = [];
      val.isEdit = !val.isEdit;
      this.isStatus = true;
      this.$forceUpdate(); // 强制刷新
    },
    // 获取班级
    async getClassMsg() {
      const res = await getClass(sessionStorage.getItem('userid'));
      // console.log('班级', res);
      this.classList = [{ departmentId: 0, name: '全部' }, ...res.data];
      // 循环添加是否选中的状态
      this.classList.forEach(item => {
        item.status = false;
      });
      this.classList[0].status = true;
      for (let i = 0; i < this.classList.length; i++) {
        for (let j = i + 1; j < this.classList.length; j++) {
          if (this.classList[i].departmentId === this.classList[j].departmentId) {
            this.classList.splice(j, 1);
            j--;
          }
        }
      }
      // console.log(this.classList);
    },
    // 改变班级选择
    changeStatus(val) {
      // console.log(this.classList);
      this.classList.forEach(item => {
        if (item.departmentId === val.departmentId) {
          // console.log(item);
          item.status = true;
          this.departmentId = item.departmentId;
          // return {...item, status: true};
        } else {
          item.status = false;
        }
      });
      this.$forceUpdate(); // 强制刷新
      // 改变学生人数
      this.isStatus = false;
      this.gettableData(val.departmentId);
      // this.$forceUpdate();
    },
    // 点击选择经理
    selectRole(val) {
      // console.log('点击', val);
      this.$refs.child.openSelectRole(val.managerList, val.id, this.departmentId);
    },
    // 获取项目经理角色
    getProjectRoleList(val, id) {
      // console.log('接收到的项目经理角色', val, id);
      this.projectRoleList = val;
      // console.log(this.tableData);
      // this.tableData.forEach(item => {
      //   if (item.id === id) {
      //     item.managerList = val;
      //   }
      // });
      // console.log(this.tableData);
    },
    // 点击选取组员
    getMembers(val) {
      // console.log(val);
      this.$refs.childMember.openSelectMember(val.projectUserVoList, val.id, this.departmentId);
    },
    // 获取选择的成员
    getProjectMemberList(val) {
      // console.log('选择的成员', val);
      // 将获取到的选择的成员数组赋值给projectMemberList
      this.projectMemberList = val;
      // console.log('选择的成员', this.projectMemberList);
    },
    // 修改时间
    async changeTime(val) {
      // console.log(val);
      // this.$confirm(`确认将到期时间修改为${val.endDate}?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(async () => {
      //   const res = await updateGroups({ id: val.id, enddate: val.endDate });
      //   // console.log(res);
      //   if (res.code === 200) {
      //     this.$message({
      //       showClose: true,
      //       type: 'success',
      //       message: '修改成功!'
      //     });
      //     this.gettableData(0);
      //   } else {
      //     // this.$message.error(`修改失败,${res.msg}`);
      //     this.$message({
      //       showClose: true,
      //       message: `修改失败,${res.msg}`,
      //       type: 'error'
      //     });
      //   }
      // }).catch(() => {
      //   this.$message({
      //     showClose: true,
      //     type: 'info',
      //     message: '已取消修改'
      //   });
      // });

      const res = await updateGroups({ id: val.id, enddate: val.endDate });
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '修改成功!'
        });
        this.gettableData(0);
      } else {
        // this.$message.error(`修改失败,${res.msg}`);
        this.$message({
          showClose: true,
          message: `修改失败,${res.msg}`,
          type: 'error'
        });
      }
    },
    // 修改项目名称
    changeName(val) {
      // console.log(val);
      // 先判断输入的值是否发生了改变
      // console.log(this.tableData2);
      this.tableData2.forEach(async item => {
        if (item.id === val.id && item.name !== val.name) {
          const res = await updateGroups({ id: val.id, name: val.name });
          // console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改成功!'
            });
            this.gettableData(0);
          } else {
            // this.$message.error(`修改失败,${res.msg}`);
            this.$message({
              showClose: true,
              message: `修改失败,${res.msg}`,
              type: 'error'
            });
          }

          // this.$confirm(`确认将项目名称修改为${val.name}?`, '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(async () => {
          //   // 用户确认修改
          //   const res = await updateGroups({id: val.id, name: val.name});
          //   console.log(res);
          //   if (res.code === 200) {
          //     this.$message({
          //       showClose: true,
          //       type: 'success',
          //       message: '修改成功!'
          //     });
          //     this.gettableData(0);
          //   } else {
          //     // this.$message.error(`修改失败,${res.msg}`);
          //     this.$message({
          //       showClose: true,
          //       message: `修改失败,${res.msg}`,
          //       type: 'error'
          //     });
          //   }
          // }).catch(() => {
          //   this.$message({
          //     showClose: true,
          //     type: 'info',
          //     message: '已取消修改'
          //   });
          // });
        } else {
          console.log('没改');
        }
      });
    },
    // 修改项目小组名称
    changeGroupName(val) {
      // console.log(val);
      this.tableData2.forEach(async item => {
        if (item.id === val.id && item.groupName !== val.groupName) {
          const res = await updateGroups({id: val.id, groupname: val.groupName});
          // console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改成功!'
            });
            this.gettableData(0);
          } else {
            // this.$message.error(`修改失败,${res.msg}`);
            this.$message({
              showClose: true,
              message: `修改失败,${res.msg}`,
              type: 'error'
            });
          }

          // this.$confirm(`确认将项目小组名称修改为${val.groupName}?`, '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(async () => {
          //   const res = await updateGroups({id: val.id, groupname: val.groupName});
          //   console.log(res);
          //   if (res.code === 200) {
          //     this.$message({
          //       showClose: true,
          //       type: 'success',
          //       message: '修改成功!'
          //     });
          //     this.gettableData(0);
          //   } else {
          //     // this.$message.error(`修改失败,${res.msg}`);
          //     this.$message({
          //       showClose: true,
          //       message: `修改失败,${res.msg}`,
          //       type: 'error'
          //     });
          //   }
          // }).catch(() => {
          //   this.$message({
          //     showClose: true,
          //     type: 'info',
          //     message: '已取消修改'
          //   });
          // });
        } else {
          console.log('没有修改');
        }
      });
    }
  },
  created() {
    this.getData();
    this.gettableData(0);
    this.getClassMsg();
  }
};
</script>

<style scoped lang="less">
button,
img {
  cursor: pointer;
}
.head {
  height: 190px;
  width: 98%;
  margin: 0 auto;
  box-sizing: border-box;
  background-image: url("../../../assets/Lessonpreparationbg.png");
  background-size: contain;
  background-repeat: no-repeat;
  // padding-top: 80px;
  display: flex;
  // justify-content:space-between;
  align-items: center;
  .left {
    padding-left: 30px;
    box-sizing: border-box;
    padding-top: 20px;
    img {
      height: 46px;
      width: 72px;
      margin-right: 25px;
      // margin-top: 10px;
    }
  }
  .text {
    padding-left: 10px;
    // padding-top: 10px;
    // margin-left: 10px;
    span {
      padding-top: 10px;
      font-size: 28px;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .middle {
    box-sizing: border-box;
    margin-left: 356px;
    padding-top: 10px;
    span {
      font-size: 26px;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
.classes {
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  .left {
    span {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    div {
      margin-top: 10px;
      ul {
        display: flex;
        li {
          list-style: none;
          cursor: pointer;
          // width: 69px;
          padding: 0 10px;
          height: 25px;
          // background: linear-gradient(270deg, #1160CF 0%, #CD06BF 100%);
          border-radius: 8px;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #111111;
        }
        .active {
          color: white;
          background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
        }
      }
    }
  }
  .right {
    display: flex;
    padding-top: 36px;
    box-sizing: border-box;
    div {
      width: 180px;
      height: 80px;
      cursor: pointer;
      // background: #FFBD73;
      box-shadow: 2px 2px 4px 0px rgba(153, 153, 153, 0.5);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 46px;
      img {
        height: 48px;
        width: 48px;
        margin-right: 10px;
      }
      // padding-top: 20px;
      // &:nth-child(1) {
      //   text-align: center;
      //   background: #ffbd73;
      //   flex-wrap: wrap;
      //   p {
      //     margin: 0;
      //     padding: 0;
      //     font-size: 16px;
      //     font-weight: 400;
      //     color: #ffffff;
      //     // line-height: 22px;
      //     span {
      //       font-size: 18px;
      //       font-weight: 600;
      //     }
      //   }
      // }
      &:nth-child(1) {
        background: #ffffff;
        span {
          font-size: 16px;
          font-weight: 400;
          color: #8c5fdd;
        }
      }
      &:nth-child(2) {
        background: #eb7589;
        margin-right: 0px;
        span {
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
.studentsGroup {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.groupContent {
  margin-top: 30px;
  padding: 0 20px;
  p {
    margin: 0;
    padding: 0;
  }
  .tableContent {
    .item {
      img {
        width: 40px;
        height: 40px;
        // background: #d8d8d8;
        box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
        border: 3px solid #ffffff;
        border-radius: 50%;
      }
    }
    .managerList {
      display: flex;
      align-items: center;
      .role {
        display: flex;
        align-items: center;
      }
      .morePeople {
        width: 45px;
        height: 45px;
        // background: #e8f8fb;
        box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
        border: 3px solid #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .status {
        span {
          display: inline-block;
          width: 82px;
          height: 26px;
          border-radius: 17px;
        }
        .waitingStart {
          color: #555555;
        }
        .going {
          color: #ffd167;
          background: #ffeec6;
        }
        .competed {
          color: #3ea528;
          background: #e8f8ec;
        }
      }
    }
    .el-textarea {
      width: 160px;
      height: 80%;
      display: flex;
      align-items: center;
    }
    /deep/.el-table__body td {
      padding: 0;
      height: 110px !important;
    }
    /deep/.el-table .cell {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /deep/.el-textarea__inner {
      padding: 0;
      margin: 0;
      border: 0;
    }
    /deep/.el-textarea:hover {
      box-shadow: 1px #dcdfe6;
    }
    .btn {
      .item {
        margin-right: 20px;
      }
      img {
        height: 45px;
        width: 45px;
      }
    }
  }
}
.el-date-editor.el-input {
  width: 150px;
}
/deep/.table .el-table__row td:focus-within {
  box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
    inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
}
</style>
